<template>
  <section class="foot-guide">
    <div class="guide-item" :class="{'active' : $route.path.indexOf('home') !== -1}" @click="gotoAddress('/home')">
      <i class="iconfont icon-home"></i>
      <span>首页</span>
    </div>
    <div class="guide-item" :class="{'active' : $route.path.indexOf('location') !== -1}" @click="gotoAddress('/location')">
      <i class="iconfont icon-faxian"></i>
      <span>发现</span>
    </div>
    <div class="guide-item" :class="{'active' : $route.path.indexOf('car') !== -1}" @click="gotoAddress('/car')">
      <i class="iconfont icon-gouwuchekong"></i>
      <span>购物车</span>
    </div>
    <div class="guide-item" :class="{'active' : $route.path.indexOf('order') !== -1}" @click="gotoAddress('/order')">
      <i class="iconfont icon-dingdan"></i>
      <span>订单</span>
    </div>
    <div class="guide-item" :class="{'active' : $route.path.indexOf('profile') !== -1}" @click="gotoAddress('/profile')">
      <i class="iconfont icon-guanyuwomen"></i>
      <span>我的</span>
    </div>
  </section>
</template>

<script>
export default {
  name: 'FootBar',
  methods: {
    gotoAddress (path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.foot-guide {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-flex;
  display: flex;
  height: 1.28rem;
  background-color: #fff;
  box-shadow: 0px 4px 26.4px 2.6px rgba(242, 242, 242, 0.75);
  .guide-item {
    flex: 1;
    display: -webkit-flex;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    padding-top: .226667rem;
    color: #b5b5b5;
    &.active {
      color: #61a843;
    }
    i {
      font-size: .453333rem;
    }
    span {
      margin-top: .08rem;
      height: .266667rem;
      font-size: .266667rem
    }
  }
}
</style>
